<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件处理</title>
<<<<<<< HEAD
  <style>
    .list{
      height:200px;
      width:200px;
      overflow: auto;
    }
    li{
      height:100px;
      width:200px;
    }
  </style>
=======
>>>>>>> c608ae2a7940d111aba00085518cde06a74f5c5f
</head>
<body>
<div id="app">
  <p>{{name}}</p>
<!--  使用v-on绑定点击事件-->
  <button v-on:click="editName">点击修改名称</button>
<!--  使用@click的简写，并且使用另一种方式获取用户输入的数据-->
  <br>
  <table style="border: 1px solid black;">
    <tr v-for="(st,index) in students">
      <td>{{st.name}}</td>
      <td>{{st.age}}</td>
      <td>{{st.sex}}</td>
<!--      这里的函数传入了参数，那么在方法中event就找不到了，所以这边需要使用$event占位，这样就可以既有参数又可以提取事件了-->
      <td> <button @click="deleteForIndex($event,index)">删除</button></td>
    </tr>
  </table>

<<<<<<< HEAD
  <h3>事件修饰符</h3>
<!--  阻止默认事件-->
  <h3>阻止默认事件</h3>
  <a href="http://www.atguigu.com" @click.prevent="showInfo">尚硅谷</a>
<!--  阻止事件冒泡-->
  <h3>阻止事件冒泡</h3>
  <div @click="showInfo" style="border: 1px solid black">
    <button @click.stop="showInfo">点击提示</button>
  </div>
<!--  事件只触发一次-->
  <h3>事件只触发一次</h3>
  <br>
  <button @click.once="showInfo">点击提示</button>
  <br>
  <h3>使用事件的捕获模式</h3>
  <div @click.capture="showMsg(1)" style="border: 1px solid black;background: pink;width:auto;height:50px">
    <div style="background: skyblue;width:100px;height:20px" @click="showMsg(2)">点击提示</div>
  </div>
  <h3>使用.self阻止冒泡事件，只有当event.target是当前操作的元素才会触发事件</h3>
  <div @click.self="showInfo" style="border: 1px solid black">
    <button @click="showInfo">点击提示</button>
  </div>
  <h3>passive:事件的默认行为立即执行，无需等待事件回调执行完毕</h3>
<!--  scroll触发的是滚轮的事件，wheel触发的是鼠标滚轮的事件，只要鼠标滚轮被转动，事件就会被触发，且如果wheel绑定的函数未执行完毕，那么
他的滑轮滚动的默认行为就不会执行，这个时候就需要使用passive，加上passive之后，不管绑定的函数有没有执行完毕，都会先执行事件的默认行为-->
<!--  <ul class="list" @scroll="showInfos">-->
<!--    <li>1</li>-->
<!--    <li>2</li>-->
<!--    <li>3</li>-->
<!--    <li>4</li>-->
<!--  </ul>-->
  <ul class="list" @wheel="showInfos">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
=======
>>>>>>> c608ae2a7940d111aba00085518cde06a74f5c5f
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
  const vm=new Vue({
    el:"#app",
    data:{
      name:"君心一隅",
      students:[
        {
         name:"张三",
          age:18,
          sex:"男"
        },
        {
          name:"李四",
          age:16,
          sex:"男"
        }
      ]
    },
    methods:{
      //通过prompt获取用户输入的名称
      editName(event){
        console.log(event)
        let msg=prompt("请输入需要修改的信息",this.name)
        if (msg) {
          this.name = msg
        }else{
          alert("请输入正确的内容")
        }
      },
      //
      deleteForIndex(event,msg){
        console.log(event)
        //删除指定的数据
        if (msg){
          let flag=confirm("您确定要删除这条数据吗？")
          if(flag){
            if (msg!==-1){
              this.students.splice(msg)
            }
          }
        }
<<<<<<< HEAD
      },

      //点击按钮展示
      showInfo(e){
        alert(this.name+"同学，你好")
        console.log(e.target)
      },

      //获取用户输入信息
      showMsg(msg){
        console.log(msg)
      },

      //滑块滚动
      showInfos(){
        for (let i = 0; i <100000 ; i++) {
          console.log("滑块活动")
        }
=======
>>>>>>> c608ae2a7940d111aba00085518cde06a74f5c5f
      }

    }
  })
</script>
</body>
</html>
